<template>
  <!-- 几何体方法.setFromPoints -->
  <div>
    <div> 层级模型</div>
    <div ref="webgl" id="webgl" style="width: 800px; height: 500px">1212</div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  onMounted(() => {
    init();
  });

  function init() {
    const scene = new THREE.Scene();
    const width = 800;
    const height = 500;
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(-100, 300, 300);
    camera.lookAt(scene.position);
    const render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    console.log(' webgl.value', webgl.value);

    webgl.value.appendChild(render.domElement);
    // document.body.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);

    //创建两个网格模型mesh1、mesh2
    const geometry = new THREE.BoxGeometry(20, 20, 20);
    const material = new THREE.MeshLambertMaterial({ color: 0xff1122 });
    const group = new THREE.Group();
    const mesh1 = new THREE.Mesh(geometry, material);
    const mesh2 = new THREE.Mesh(geometry, material);
    mesh2.translateX(25);
    //把mesh1型插入到组group中，mesh1作为group的子对象
    group.add(mesh1);
    //把mesh2型插入到组group中，mesh2作为group的子对象
    group.add(mesh2);
    //把group插入到场景中作为场景子对象
    scene.add(group);
    console.log('group', scene);

    const mesh3 = new THREE.Mesh(geometry, material);
    mesh3.translateZ(30);
    const mateMesh4 = material.clone();
    mateMesh4.color.set('#12a60a');
    const mesh4 = new THREE.Mesh(geometry, mateMesh4);
    mesh4.translateZ(60);
    mesh4.rotateX(Math.PI / 4);
    const mesh4Helper = new THREE.AxesHelper(30);
    mesh4.add(mesh4Helper);

    const obj = new THREE.Object3D(); //作为mesh1和mesh2的父对象
    obj.add(mesh3, mesh4);
    scene.add(obj);

    // 批量创建多个长方体表示高层楼
    const group1 = new THREE.Group(); //所有高层楼的父对象
    group1.name = '高层';
    for (let i = 0; i < 5; i++) {
      const geometry = new THREE.BoxGeometry(20, 60, 10);
      const material = new THREE.MeshLambertMaterial({
        color: 0x00ffff,
      });
      const mesh = new THREE.Mesh(geometry, material);
      mesh.position.x = i * 30; // 网格模型mesh沿着x轴方向阵列
      group1.add(mesh); //添加到组对象group1
      mesh.name = i + 1 + '号楼';
      // console.log('mesh.name',mesh.name);
    }
    group1.position.y = 30;

    const group2 = new THREE.Group();
    group2.name = '洋房';
    // 批量创建多个长方体表示洋房
    for (let i = 0; i < 5; i++) {
      const geometry = new THREE.BoxGeometry(20, 30, 10);
      const material = new THREE.MeshLambertMaterial({
        color: 0x00ffff,
      });
      const mesh = new THREE.Mesh(geometry, material);
      mesh.position.x = i * 30;
      group2.add(mesh); //添加到组对象group2
      mesh.name = i + 6 + '号楼';
    }
    group2.position.z = 50;
    group2.position.y = 15;

    const model = new THREE.Group();
    model.name = '小区房子';
    model.add(group1, group2);
    model.position.set(-50, 0, -25);
    console.log('aaaaaaa', model);

    //   scene.add(model);

    // 返回名.name为"4号楼"对应的对象
    const nameNode = scene.getObjectByName('8号楼');
    console.log('洋房', nameNode);

    // 递归遍历model包含所有的模型节点
    scene.traverse(function (obj) {
      console.log('所有模型节点的名称', obj.name);
      // obj.isMesh：if判断模型对象obj是不是网格模型'Mesh'
      // if (obj.isMesh) {
      //   //判断条件也可以是obj.type === 'Mesh'
      //   obj.material.color.set(0xffff00);
      // }
    });

    function renderFun() {
      // console.log('asdfasdf');

      render.render(scene, camera);
      requestAnimationFrame(renderFun);
    }
    renderFun();
  }
</script>
